<template>
  <div class="dataCenter">
    <div class="box">
      <content-title>用户活跃情况</content-title>
      <div class="f-fs-fs-r-w-sa">
        <echarts :options="visitorOpts" :cssText="cssText"></echarts>
        <echarts :options="browseOpts" :cssText="cssText"></echarts>
        <echarts :options="submitOpts" :cssText="cssText"></echarts>
        <echarts :options="payOpts" :cssText="cssText"></echarts>
        <echarts :options="buyerOpts" :cssText="cssText"></echarts>
      </div>
    </div>
    <div class="box">
      <content-title>商品营收情况</content-title>
      <div class="f-fs-fs-r-w-sa">
        <echarts :options="sellOpts" :cssText="cssText"></echarts>
        <echarts :options="volumeOpts" :cssText="cssText"></echarts>
        <echarts :options="ratioOpts" :cssText="cssText"></echarts>
      </div>
    </div>
  </div>
</template>
<script>
import Echarts from "../base/Echarts.vue";
export default {
  components: { Echarts },
  name: "dataCenter",
  data() {
    return {
      cssText: {
        width: "450px",
        height: "350px",
        minWidth: "400px",
        background: "#fff8f4",
      },
    };
  },
  computed: {
    visitorOpts() {
      let opts = JSON.parse(JSON.stringify(this.$baseOpts));
      opts.title.text = "访客数";
      return opts;
    },
    browseOpts() {
      let opts = JSON.parse(JSON.stringify(this.$baseOpts));
      opts.title.text = "浏览量";
      return opts;
    },
    submitOpts() {
      let opts = JSON.parse(JSON.stringify(this.$baseOpts));
      opts.title.text = "下单笔数";
      return opts;
    },
    payOpts() {
      let opts = JSON.parse(JSON.stringify(this.$baseOpts));
      opts.title.text = "支付笔数";
      return opts;
    },
    buyerOpts() {
      let opts = JSON.parse(JSON.stringify(this.$baseOpts));
      opts.title.text = "支付买家数";
      return opts;
    },
    sellOpts() {
      let opts = JSON.parse(JSON.stringify(this.$baseOpts));
      opts.title.text = "销售量";
      return opts;
    },
    volumeOpts() {
      let opts = JSON.parse(JSON.stringify(this.$baseOpts));
      opts.title.text = "成交额";
      return opts;
    },
    ratioOpts() {
      let opts = JSON.parse(JSON.stringify(this.$baseOpts));
      opts.title.text = "成交转化率";
      return opts;
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  margin-bottom: 30px;
}
.echarts {
  margin: 10px;
  &:last-child {
    margin-right: 0;
  }
}
</style>
